<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		<title>网站访问及下单数</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<style>
		.line1{
			fill:none;
			stroke:#D98234;
			stroke-width:1px;
		}
		.line2{
			fill:none;
			stroke:#0099FF;
			stroke-width:1px;
		}
		.text{
			text-anchor: middle;
			font-weight: bolder;
			font-size: 10px;	
		}
		.text1{
			fill:#D98234;
		}
		.text2{
			fill:#0099FF;
		}
		.legend_text{
			text-anchor: left;
			font-weight: bolder;
			font-size: 12px;	
		}
		/*坐标轴样式*/
		.axis path,
			.axis line{
				stroke:white;
			}
			.axis text{
				font-size:10px;
				fill:white;
			}
	</style>
	<body>
		
		<script>		
			//读取json数据
			d3.json("Data/visits.json",function(error,data){
				if (error)
					return console.error(error);
				console.log(data);
				weekday=[]
				for (i=0;i<data.length;i++){
					weekday.push(data[i].weekday)
				}
				console.log(weekday);
				var height=600;
				var width=800;
				var padding={left:50,top:20,right:50,bottom:20};
				var xAxisWidth=width-padding.left-padding.right;
				var yAxisHeight=height-padding.top-padding.bottom;
				var svg=d3.select("body").append("svg")
					.attr("height",height)
					.attr("width",width);
				//添加背景
				svg.append("rect")
					.attr("height",height)
					.attr("width",width)
					.attr("fill","#404A59");
				//定义比例尺
				var xScale=d3.scaleBand()
			        .domain(weekday)
			        .range([0,xAxisWidth]);
				var yScale=d3.scaleLinear()
				    .domain([0,Math.round(d3.max(data,function(d){return d.访问人数;}))*1.1])
				    .range([0,yAxisHeight]);							 
				    
				//添加圆形散点
				yScale.range([0,yAxisHeight]);
				svg.selectAll("circle")
				    .data(data)
				    .enter()
				    .append("circle")
				    .attr("cx",function(d,i){return padding.left+xScale(d.weekday)+xScale.bandwidth()/2;})
				    .attr("cy",function(d,i){return height-padding.bottom-yScale(d.访问人数);})
				    .attr("r","5px")
				    .attr("fill","#E78932")
				    .on('mouseover',mouseover)
				    .on('mouseout',mouseout);
				svg.selectAll("circle1")
				    .data(data)
				    .enter()
				    .append("circle")
				    .attr("cx",function(d,i){return padding.left+xScale(d.weekday)+xScale.bandwidth()/2;})
				    .attr("cy",function(d,i){return height-padding.bottom-yScale(d.下单人数);})
				    .attr("r","5px")
				    .attr("fill","#0099FF")
				    .on('mouseover',mouseover)
				    .on('mouseout',mouseout);
				    
				//添加折线
				var linePath1=d3.line()
					.x(function(d){return xScale(d.weekday)+xScale.bandwidth()/2;})
					.y(function(d){return yScale(d.访问人数);});
				var linePath2=d3.line()
					.x(function(d){return xScale(d.weekday)+xScale.bandwidth()/2;})
					.y(function(d){return yScale(d.下单人数);});
				yScale.range([yAxisHeight,0]);
				svg.selectAll("path1")
					.data(data)
					.enter()
					.append("path")
				   	.attr("d",linePath1(data))
				   	.attr("transform","translate("+padding.left+","+padding.top+")")
				   	.attr("class","line1");
				svg.selectAll("path2")
					.data(data)
					.enter()
					.append("path")
				   	.attr("d",linePath2(data))
				   	.attr("transform","translate("+padding.left+","+padding.top+")")
				   	.attr("class","line2");
				//添加坐标轴
				var xAxis=d3.axisBottom(xScale);
				var yAxis=d3.axisLeft(yScale);
				svg.append("g")
				    .attr("transform","translate("+padding.left+","+(padding.top+yAxisHeight)+")")
				    .call(xAxis)
				    .attr("class","axis")   
				svg.append("g")
				    .attr("transform","translate("+padding.left+","+(padding.top)+")")
				    .call(yAxis)
				    .attr("class","axis");
				//添加数值标签
				yScale.range([0,yAxisHeight]);
				svg.selectAll("mytext")
					.data(data)
					.enter()
					.append("text")
					.attr("x",function(d,i){return padding.left+xScale(d.weekday)+xScale.bandwidth()/2;})
					.attr("y",function(d,i){return height-padding.bottom-yScale(d.访问人数);})
					.text(function(d){return d.访问人数;})
					.attr("dy","-1.5em")
					.attr("class","text text1");
					
 				svg.selectAll("mytext")
					.data(data)
					.enter()
					.append("text")
					.attr("x",function(d,i){return padding.left+xScale(d.weekday)+xScale.bandwidth()/2;})
					.attr("y",function(d,i){return height-padding.bottom-yScale(d.下单人数);})
					.text(function(d){return d.下单人数;})
					.attr("dy","-1.5em")
					.attr("class","text text2");
					
				//添加图例
				svg.append("circle")
					.attr("cx",padding.left+xScale.bandwidth()/2)
					.attr("cy",padding.top+10)
					.attr("r","5px")
					.attr("fill","#D98234");
				svg.append("circle")
					.attr("cx",padding.left+150)
					.attr("cy",padding.top+10)
					.attr("r","5px")
					.attr("fill","#0099FF");	
				svg.append("text")
					.attr("x",padding.left+xScale.bandwidth()/2+10)
					.attr("y",padding.top+10)
					.text("访问人数")
					.attr("dy","0.3em")
					.attr("class","legend_text text1");
				svg.append("text")
					.attr("x",padding.left+160)
					.attr("y",padding.top+10)
					.text("下单人数")
					.attr("dy","0.3em")
					.attr("class","legend_text text2");	
					
				function mouseover(){
					var mouseX=d3.mouse(this)[0];           //获取鼠标焦点的x坐标
					var mouseY=d3.mouse(this)[1];           //获取鼠标焦点的y坐标
					var cx=d3.select(this).attr("cx");      //获取圆的cx属性
					var cy=d3.select(this).attr("cy");      //获取圆的cy属性
					var fc=d3.select(this).style("fill");    //获取圆的填充颜色 
					var xScale_invert=d3.scaleQuantize()
						.domain([0,xAxisWidth])
						.range(weekday);
					var weekday_text=xScale_invert(cx-padding.left-xScale.bandwidth()/2);
//					console.log(weekday_text);
					var num=Math.round(yScale.invert(height-padding.bottom-cy));
				
					//添加焦点圆
					svg.append("circle")
						.attr("id","focusCircle")
						.attr("cx",cx)
						.attr("cy",cy)
						.attr("r",13)
						.attr("fill",fc)
						.attr("pointer-events","none")     //使此元素不触发任何事件，以免遮挡下面的元素触发事件
						.transition()
						.duration(1000);
					//添加提示框
					svg.append("rect")
						.attr("id","tooltip_rect")
						.attr("x",mouseX)
						.attr("y",mouseY+30)
						.attr("height",70)
						.attr("width",120)
						.attr("rx","5px")
						.attr("ry","5px")
						.attr("stroke","white")
						.attr('opacity',0.5);
					//添加提示文本
					svg.append("text")
						.attr("id","weekday")
						.attr("x",mouseX+5)
						.attr("y",mouseY+50)
						.text("星期："+weekday_text)
						.attr("fill",fc)
						.attr("font-size","14px");	
					svg.append("text")
						.attr("id","num_text")
						.attr("x",mouseX+5)
						.attr("y",mouseY+70)
						.text("人数："+num+"人")
						.attr("fill",fc)
						.attr("font-size","14px");	
						
				};
				function mouseout(){
					svg.select('#focusCircle').remove();
					svg.select('#tooltip_rect').remove();
					svg.select('#weekday').remove();
					svg.select('#num_text').remove();
				};
					
			});
			

		</script>

	</body>
</html>
